<template>
  <div id="index">
    <!-- 顶部 -->
    <div class="top">
      <div class="center tip">
        <span class="left">欢迎访问郑州高新技术产业开发区信用建设管理平台</span>
        <span class="right">
          <span>管理后台</span>
          <span>意见建议</span>
        </span>
      </div>
    </div>
    <!-- 顶部导航搜索 -->
    <div class="bgsearch">
      <div class="center">
          <div class="search">
            <input type="text" placeholder="请输入企业名或组织机构代码">
            <button></button>
          </div>
      </div>
      <!-- 导航栏 -->
      <div class="nav">
        <div class="center">
          <div class="con">
            <router-link tag="p" class="active" to="index"><span>首页</span></router-link>
            <router-link tag="p" to="policy"><span>政策法规</span></router-link>
            <router-link tag="p" to="build"><span>信用建设</span></router-link>
            <router-link tag="p" to="map"><span>信用地图</span></router-link>
            <router-link tag="p" to="responsibility"><span>信用责任</span></router-link>
            <router-link tag="p" to='publicity'><span>信息公示</span></router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 新闻 -->
    <div class="news">
      <div class="center">
        <div class="title">
          <img src="../../assets/image/Title.png" alt="">
        </div>
        <el-carousel :interval="3000" arrow="always" :autoplay= 'false' indicator-position="none">
          <el-carousel-item v-for="item in 2" :key="item">
              <div class="swipercon">
                <div class="swleft">
                  <img src="../../assets/image/news.png" alt="">
                </div>
                <div class="swright">
                  <div class="title">2018年全国各级信用信息共享平台观摩培训活动在XX开幕</div>
                  <div class="date">2018-09-11</div>
                  <div class="content">
                    9月10日，“2018年全国各级信用信息共享平台和信用门户网站建设观摩
                    培训活动”在XXXXXXXXXX掀开帷幕。本促活动由国家发展改革委指导，
                    国家信息中心与国家公共信用信息中心主办，XX市人民政府和XXXX省经
                    济和信息化委员会协办，XXX市发改委承办。按照会议日程，本次活动将
                    分预选和观......
                    济和信息化委员会协办，XXX市发改委承办。按照会议日程，本次活动将
                    分预选和观......
                    济和信息化委员会协办，XXX市发改委承办。按照会议日程，本次活动将
                    分预选和观......
                  </div>
                  <div class="lookdetail"> 
                    <span>查看详情</span>
                  </div>
                </div>
              </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 下划线 -->
    <hr class="center swhr">
    <div class="iconf center">
      <div class="swico"> 
        <div> <img src="../../assets/image/icon_map.png" alt=""></div>
        <div class="text">信用地图</div>
      </div>
      <div class="swico">
        <div> <img src="../../assets/image/icon_build.png" alt=""></div>
        <div class="text">信用建设</div>
      </div>
      <div class="swico">
        <div> <img src="../../assets/image/icon_query.png" alt=""></div>
        <div class="text">企业借贷异常名单</div>
      </div>
      <div class="swico">
        <div> <img src="../../assets/image/icon_list.png" alt=""></div>
        <div class="text">信用责任清单</div>
      </div>
    </div>
    <!-- ------------------------------------- -->
    <div class="redblack center">
      <div class="leftred">
        红
      </div>
      <div class="rightred">
          <p class="one">黑榜</p>
          <p class="two">Red and black list</p>
      </div>
    </div>
    <div class="redbc center">
        <!-- -------白盒子---- -->
         <div class="redbox">
          <div class="redtitle">
          </div>
            <div class="redlist">
              <p><span class="left">1、河南省XXXXXXXXXXXXXXX有限公司</span> <span class="right">2018-11-27</span></p>
              <p><span class="left">2、河南省XXXXXXXXXXXXXXX有限公司</span> <span class="right">2018-11-27</span></p>
              <p><span class="left">3、河南省XXXXXXXXXXXXXXX有限公司</span> <span class="right">2018-11-27</span></p>
              <p><span class="left">4、河南省XXXXXXXXXXXXXXX有限公司</span> <span class="right">2018-11-27</span></p>
              <p><span class="left">5、河南省XXXXXXXXXXXXXXX有限公司</span> <span class="right">2018-11-27</span></p>
              <p><span class="left">6、河南省XXXXXXXXXXXXXXX有限公司</span> <span class="right">2018-11-27</span></p>
              <p><span class="left">7、河南省XXXXXXXXXXXXXXX有限公司</span> <span class="right">2018-11-27</span></p>
              <p><span class="left">8、河南省XXXXXXXXXXXXXXX有限公司</span> <span class="right">2018-11-27</span></p>
            </div>
         </div>
         <!-- -------黑盒子---- -->
         <div class="blackbox">
          <div class="redtitle">
            
          </div>
          <div class="blacklist">
              <p><span class="left">1、河南省XXXXXXXXXXXXXXX有限公司</span> <span class="right">2018-11-27</span></p>
              <p><span class="left">2、河南省XXXXXXXXXXXXXXX有限公司</span> <span class="right">2018-11-27</span></p>
              <p><span class="left">3、河南省XXXXXXXXXXXXXXX有限公司</span> <span class="right">2018-11-27</span></p>
              <p><span class="left">4、河南省XXXXXXXXXXXXXXX有限公司</span> <span class="right">2018-11-27</span></p>
              <p><span class="left">5、河南省XXXXXXXXXXXXXXX有限公司</span> <span class="right">2018-11-27</span></p>
              <p><span class="left">6、河南省XXXXXXXXXXXXXXX有限公司</span> <span class="right">2018-11-27</span></p>
              <p><span class="left">7、河南省XXXXXXXXXXXXXXX有限公司</span> <span class="right">2018-11-27</span></p>
              <p><span class="left">8、河南省XXXXXXXXXXXXXXX有限公司</span> <span class="right">2018-11-27</span></p>
          </div>
         </div>
      </div>
      <!-- ------------------- -->
      <div class="redblack center">
      <div class="leftred">公</div>
      <div class="rightred">
          <p class="one">示专栏</p>
          <p class="two">Publicity column</p>
      </div>
    </div>
    <div class="titlegs center">
        <span class="active">行政许可公示</span>
        <span>行政处罚公示</span>
        <span>经营异常名录</span>
        <span>严重违法失信企业名单</span>
    </div>
    <div class="center gsDetail">
        <div class="query">
          <div class="qleft">
            <span class="lefts">行政许可名称：
              <el-input v-model="input" size="mini" placeholder="请输入企业或个人信息（如：名称、统一社会信用代码或身份证号）"></el-input>
            </span>
            <span class="qright">许可决定日期：
                <div class="block">
                    <el-date-picker
                      v-model="riqi"
                      type="date"
                      size="mini"
                      placeholder="选择日期">
                  </el-date-picker>
              </div>
                <button class="btn">搜索</button>
            </span>
          </div>
          <div class="qright"></div>
        </div>
        <div class="num">
          <span>根据搜索条件，共找到<span class="red">323566</span>条数据</span>
        </div>
        <!-- 表格 -->
        <div class="table">
           <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="faren" label="法人"  align='center'></el-table-column>
            <el-table-column prop="jdwsh" label="决定文书号"  align='center'></el-table-column>
            <el-table-column prop="xmmc" label="项目名称"  align='center'></el-table-column>
            <el-table-column prop="xkjg" label="许可机关"  align='center'></el-table-column>
            <el-table-column prop="xkjdrq" label="许可决定日期"  align='center'></el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="pgfenye">
           <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="total, prev, pager, next, jumper"
            :total="200">
            </el-pagination>
        </div>
            
    </div>
    <!-- -------------------------- -->
    <foot></foot>
  </div>
</template>

<script>
import foot from './home/foot.vue'
export default {
  name: 'index',
  components: {
    foot
  },
  data () {
    return {
      riqi: '',
      input: '',
       tableData: [
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
         {
         faren: '河南XXXXXXXX有限公司',
         jdwsh: 'T431',
         xmmc: '特种设备使用登记许可',
         xkjg: '郑州市质量技术监督局',
         xkjdrq: '2019-09-13'
       },
      ],
      currentPage: 1,

    };
  },
  methods: {
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  }
};
</script>

<style lang="scss">
  #index {
    .center {
      width: 1200px;
      margin: 0 auto;
    }
    .top {
      width: 100%;
      height:40px;
      background:rgba(241,241,241,1);
      .tip {
        display: flex;
        justify-content: space-between;
        span {
          font-size:16px;
          font-weight:400;
          color:rgba(56,56,56,1);
          line-height: 40px;
          &.right {
            span:first-child {
              padding-right: 20px;
              border-right: 2Px solid #cccccc;
            }
            span:last-child {
              padding-left: 18px;
            }
          }
        }
      }
    }
    .bgsearch {
      width: 100%;
      height: 640px;
      background-image: url(../../assets/image/banner.jpg);
      background-position: center center;
      position: relative;
      background-repeat: no-repeat;
      // padding-top: 450px;
      .center {
        position: relative;
        .search {
          display: inline-block;
          position: absolute;
          top: 300px;
          left: 380px;
          width:435px;
          height:51px;
          input {
            position: absolute;
            left: 0;
            top: 0;
            width:435px;
            height:51px;
            box-sizing: border-box;
            background:rgba(255,255,255,1);
            box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.35);
            opacity:0.85;
            border-radius:20px;  
            padding-right: 70px;
            padding-left: 20px;
          }
          button {
            position: absolute;
            right: -20px;
            top: 0;
            width:55px;
            height:51px;
            background-color: #db4444;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            background-image: url(../../assets/image/search.png);
            background-position: center center;
            background-repeat: no-repeat;
          }
        }
      }
      .nav {
        width: 100%;
        height:67px;
        background:rgba(213,35,36,1);
        // margin-top: 450px;
        position: absolute;
        top: 450px;
        .con {
          display: flex;
          justify-content: flex-start;
          p {
            width: 190px;
            height: 67px;
            font-size: 20px;
            color: white;
            line-height: 67px;
            text-align: center;
            box-sizing: border-box;
            border-left: 2px solid white;
            &:last-child {
              border-right: 2px solid white;
            }
            &.active {
              background-color: white;
              span {
                color: #D52324;
                border-bottom: 1px solid #D52324; 
              }
            }
          }
      }
    }
  }
  .news {
    .title  {
      text-align: center;
    }
    .el-carousel__container {
      height:348px;
      background:rgba(241,241,241,1);
      .el-carousel__arrow {
        width:40px;
        height:102px;
        background:rgba(245,151,30,1);
        border-radius: 0;
        .el-icon-arrow-right {
          font-size: 36px;
        }
        .el-icon-arrow-left {
          font-size: 36px;
        }
      }
      .swleft {
        position: absolute;
        width:500px;
        height:326px;
        left: 62px;
        top: 10px;
        img {
          width: 100%;
        }
      }
      .swright {
        position: absolute;
        width: 560px;
        height: 326px;
        right: 62px;
        top: 10px;
        .title {
          width:550px;
          height:20px;
          font-size:20px;
          font-family:MicrosoftYaHei-Bold;
          font-weight:bold;
          color:rgba(56,56,56,1);
        }
        .date {
          color: #B6B5B5;
          font-size:16px;
          text-align: right;
          height: 68px;
          line-height: 68px;
        }
        .content {
          width:547px;
          font-size:16px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(108,107,107,1);
          line-height: 30px;
          overflow:hidden; 
          text-overflow:ellipsis;
          display:-webkit-box; 
          -webkit-box-orient:vertical;
          -webkit-line-clamp:6; 
        }
        .lookdetail {
          text-align: right;
          position: absolute;
          right: 0;
          bottom: 0;
          span {
            font-size:16px;
            color: #6C6B6B;
            cursor: pointer;
          }
        }
      }
    }
  }
  .swhr {
    margin-top: 46px;
    opacity: 0.1;
    margin-bottom: 20px;
  }
  .iconf {
    display: flex;
    margin-top: 46px;
    .swico {
      width: 298px;
      height:134px;
      border-right: 1px solid #B6B5B5; 
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: center;
      &:last-child {
        border-right: 0;
      }
      .text {
        color: #383838;
        font-size: 20px;
      }
    }
  }
  .redblack {
    margin-top: 46px;
    height:50px;
    background:rgba(235,237,238,1);
    display: flex;
    .leftred {
      width: 70px;
      height: 50px;
      background-image: url(../../assets/image/rounded.png);
      background-repeat: no-repeat;
      font-size:30px;
      font-family:MicrosoftYaHei-Bold;
      font-weight:bold;
      color:rgba(255,255,255,1);
      text-align: center;
      line-height: 50px;
    }
    .rightred {
      width: 1130px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 15px;
      .one {
        font-size:20px;
      }
      .two {
        font-size: 11px;
        color:#B6B5B5;
      }
    }
  }
   .redbc{
      display: flex;
      justify-content: space-between;
      .redbox {
        width: 567px;
       .redtitle {
          width: 567px;
          height: 80px;
          background-image: url(../../assets/image/red.png);
          background-position: center center;
          background-repeat: no-repeat;
        }
        .redlist {
          border:1px solid rgba(182,181,181,1);
          box-sizing: border-box;
          padding: 10px;
          p {
            font-size: 16px;
            color: #878484;
            display: flex;
            line-height: 40px;
            justify-content: space-between;
            &:hover {
              background:rgba(243,245,246,1);
              color: #B90522;
            }
          }
        }
      }
       .blackbox {
        width: 567px;
        .redtitle {
          width: 567px;
          height: 80px;
          background-image: url(../../assets/image/black.png);
          background-position: center center;
          background-repeat: no-repeat;
        }
        .blacklist {
          border:1px solid rgba(182,181,181,1);
          box-sizing: border-box;
          padding: 10px;
          p {
            font-size: 16px;
            color: #878484;
            display: flex;
            line-height: 40px;
            justify-content: space-between;
            &:hover {
              background:rgba(243,245,246,1);
              color: #383838;
            }
          }
        }
      }
    }
    .titlegs {
      margin-top: 40px;
      span {
        display: inline-block;
        padding: 0px 26px;
        height: 37px;
        line-height: 37px;
        box-sizing: border-box;
        text-align: center;
        background-color: #EBEDEE;
        font-size:16px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(56,56,56,1);
        border-top-right-radius: 20px;
        &.active {
          background-color: #D52324;
          font-size:18px;
          font-weight:bold;
          color:rgba(255,255,255,1);
        }
      }
    }
    .gsDetail {
      border:1px solid rgba(225, 222, 222, 1);
      .query {
        margin: 40px 0 30px;
        .qleft {
            display: inline-block;
            margin-left: 85px;
            .lefts {
             .el-input {
               width: 458px;
             }
          }
         }
         .qright {
           display: inline-block;
           margin-left: 85px;
           .el-date-editor.el-input, .el-date-editor.el-input__inner {
             width: 142px;
           }
           .block {
             display: inline-block;
           }
           .btn {
             margin-left: 20px;
             width:56px;
            height:24px;
            background:rgba(213,35,36,1);
            border-radius:5px;
            color: white;
           }
         }
        }
        .num {
          padding-left:22px; 
          span {
            font-size:12px;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(182,181,181,1);
            .red {
              color: #B90522;
            }
          }
        }
        .table {
          width: 100%;
        }
        .pgfenye {
          text-align: right;
          margin: 20px 20px;
        }
      }
      
}
</style>
